<template>
    <view class="bg-[#f8f8f8]  min-h-screen">
        <view class="h-[10rpx]"></view>
        <view class="bg-white px-[40rpx] py-[20rpx]">
            <view class="py-[20rpx] border-b border-[#D8D8D8]">
                <view class="text-center text-[38rpx]">{{classInfo.data.location}}</view>
                <view class=" flex justify-between items-center">
                    <view>ssss定位:{{classInfo.data.location}}</view>
                    <u-icon name="map-fill" color="#007AFF" size="18"></u-icon>
                </view>
                <view class="mt-[10rpx]">描述：{{classInfo.data.address}}</view>
                <view class="mt-[10rpx]">
                <view class=" flex justify-between items-center">课程分类：
                     <uni-data-select   
                     v-model="classInfo.data.subjectlv_id"
                        :localdata="classInfo.range" 
                        @change="classInfo.change"
                      ></uni-data-select>
                      </view>
                </view>
                
            </view>
      
            <view v-for="(item, index) in classInfo.model" class="mt-[20rpx] bg-[#EFEFEF] px-[20rpx] py-[20rpx]">
                <view class="flex justify-between items-center pt-[20rpx]">
                  <checkbox :value="item.classes_id" @change="classInfo.getChecked(item.classes_id)" :checked="item.classes_id === classInfo.classId" />
                 <!-- <uni-data-checkbox v-model="item.classes_id" multiple  />dddddd -->
                </view>
                <view class="border-b border-[#D8D8D8]">
                    <view class="pb-[20rpx]">{{item.course_name}}</view>
                    <view class="pb-[20rpx]">课程分类：{{item.subject_name}}</view>
                    <view class="pb-[20rpx]">说明：{{item.description}}</view> 
                </view>
                <view class="flex justify-between items-center pt-[20rpx]">
                    <view>
                        <text>费用：</text>
                        <text class="text-[#FD755D]">{{item.price}}元</text>
                    </view>
                    <view>剩余名额：{{item.remaining_slots}}</view>
                </view>
            </view> 
        </view>  
            <view class="h-[104rpx] w-[100vw] flex justify-around items-center bg-white fixed bottom-0 z-[9999]" :style="{paddingBottom:iosHight+'rpx',height:(104+iosHight)+'rpx'}">
                <view @click="classInfo.submitSignUp"
                      class="w-[208rpx] rounded font-medium text-[30rpx] px-1 bg-[#FD755D] text-white h-[88rpx] flex justify-center items-center">
                        报名</view>
                </view>
            </view> 
</template>
<script setup>
  import Tabbar from "@/components/tabbar.vue";
    import noLogin from "@/components/noLogin.vue";
    import api from "@/api/api"
    import localRegistrationDetails from "@/api/localRegistrationDetails" 
    import Home from "@/api/Home"
    import { useUserStore } from '@/stores/userinfo'
    import { ref, reactive } from "vue" 
    import EventDetails from "@/api/EventDetails"  
    
    onLoad((options) => {
      classInfo.classId = options.classes_id 
      })
    
  const classInfo = reactive({ 
    model: [],
    classId: '',
    data: [],
    range: [],
    getClassInfo:async() =>{  
      if(classInfo.classId  ===''){
        uni.showLoading({ title: '请传班级ID' })
        return
      } 
      const {code,msg,data} = await EventDetails.getClassInfo({
        classes_id: classInfo.classId
      })  
      if (code === 200) {
             classInfo.data=data  
             classInfo.getRange(data)
             //subjectlv_id
             classInfo.getCourseDetailsBySubject(data.subjectlv_id)
      }else{
              uni.showToast({ title: "数据异常" }) 
      }
    },
  
      changeList: async (e) =>{
        console.log(e)
      },
      getRange: async (datas) =>{
          const {msg,code ,data} = await localRegistrationDetails.getSubjectlv({
            latitude:  datas.latitude ,
            longitude:   datas.longitude 
          })
          if(code == 200 && data){
            classInfo.range = data
            console.log(classInfo.range)
          }
      },
      change: async (e) =>{
        classInfo.getCourseDetailsBySubject(e)
      },
      //分类查询
      getCourseDetailsBySubject:async (e) =>{ 
        const {msg,code ,data} = await localRegistrationDetails.getCourseDetailsBySubject({
          subjectlv_id:e 
        })
        if(code == 200 && data){
          classInfo.model = data
          console.log(data)
        }else{
          uni.showToast({
            title: '未查询到数据',
          })
        }
        
      },
      getChecked: async (classes_id)=>{
        debugger
        console.log("==========================")
        console.log(classes_id)
        console.log(classInfo.classId)
        console.log(classes_id === classInfo.classId)
        console.log("==========================")
        return classes_id == classInfo.classId
        if(classes_id === classInfo.classId){ 
          return true;
        }else{ 
          return false;
        } 
      },
      submitSignUp: async () =>{
        //提交
        uni.showToast({
          title: '未查询到数据',
        })
      }
    })
    onMounted(classInfo.getClassInfo)

</script>
<style>
</style>